{% include "data/template-ui.html" %}
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    thead th {
        border-bottom: 2px solid #dee2e6;
    }
    tbody tr td {
        padding: 9px;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
    #demand_table {
        line-height: 19px;
    }
    .alert {
        margin-bottom: 0px;
        margin-left: 1%
    }
    select{
        border: 0 none;
        border-bottom: 1px solid;
        appearance: none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari 和 Chrome */
        -ms-appearance: none;
        padding-left: 2%;
        padding-right: 1%;
    }
    select::-ms-expand { display: none; }
    .overview_table tr td{
        font-size: 14px;
        line-height: 31px;
        padding: 0.3rem;
        vertical-align: middle;
    }
</style>

<!-- 正文主体 -->
<div class="page-wrapper">
    <!-- 标题 -->
    <div class="row page-titles">
        <div class="col-md-4 align-self-center">
            <h3 class="text-primary">风险集市数据质量仪表盘</h3>
        </div>

        <div class="col-md-5 align-self-center">
            <div class="row">
                数据日期：
                <select id="data_year" onchange="GetQuarter();" style="width: 60px;"></select><span style="padding-right: 5px;">年</span>
                <span>· 第</span><select id="data_quarter" onchange="GetMonth();" style="width: 30px;"></select><span style="padding-right: 5px;">季度 ·</span>
                <select id="data_month" onchange="GetDay();" style="width: 40px;"></select><span style="padding-right: 5px;">月</span>
                <select id="data_day" style="width: 40px;"></select><span style="padding-right: 15px;">日</span>
                <button type="button" class="btn btn-primary btn-xs p310" onclick="ChangeDataDate();"><i class="fa fa-search"></i></button>
            </div>
        </div>

        <div class="col-md-3 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="../../data/dashboard">主页</a></li>
                <li class="breadcrumb-item active">仪表盘</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid animated fadeInUp">
        <!--数据概览-->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title" style="margin-bottom: -10px;">数据质量总览</h4>
                        <div class="card-content">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card bg-pink p-20">
                                        <div class="media widget-ten">
                                            <div class="media-left meida media-middle">
                                                <span><i class="ti-vector f-s-40"></i></span>
                                            </div>
                                            <div class="media-body media-text-right">
                                                <h2 class="color-white" id="all_cnt"></h2>
                                                <p class="m-b-0">检核数据总量</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-danger p-20">
                                        <div class="media widget-ten">
                                            <div class="media-left meida media-middle">
                                                <span><i class="ti-location-pin f-s-40"></i></span>
                                            </div>
                                            <div class="media-body media-text-right">
                                                <h2 class="color-white" id="problem_cnt"></h2>
                                                <p class="m-b-0">问题数据总量</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-primary p-20">
                                        <div class="media widget-ten">
                                            <div class="media-left meida media-middle">
                                                <span><i class="ti-bag f-s-40"></i></span>
                                            </div>
                                            <div class="media-body media-text-right">
                                                <h2 class="color-white" id="problem_per"></h2>
                                                <p class="m-b-0">问题占比</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="alert alert-secondary alert-dismissible fade show">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <strong>注：</strong> 本季度的检核逻辑主要针对数据的规范性，尚未检核数据的准确性
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--问题占比-->
        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <!-- <h4 class="card-title">各公司数据质量概况</h4> -->
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover overview_table">
                                <thead>
                                    <tr>
                                        <th colspan="2">信托</th>
                                        <th>问题占比趋势</th>
                                    </tr>
                                </thead>
                                <tbody id="overview_xt">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table table-hover overview_table">
                            <thead>
                                <tr>
                                    <th colspan="2">资产</th>
                                    <th>问题占比趋势</th>
                                </tr>
                            </thead>
                            <tbody id="overview_zc">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table table-hover overview_table">
                            <thead>
                                <tr>
                                    <th colspan="2">担保</th>
                                    <th>问题占比趋势</th>
                                </tr>
                            </thead>
                            <tbody id="overview_db">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table table-hover overview_table">
                            <thead>
                                <tr>
                                    <th colspan="2">金科</th>
                                    <th>问题占比趋势</th>
                                </tr>
                            </thead>
                            <tbody id="overview_jk">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table table-hover overview_table">
                            <thead>
                                <tr>
                                    <th colspan="2">基金1</th>
                                    <th>问题占比趋势</th>
                                </tr>
                            </thead>
                            <tbody id="overview_jj1">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table table-hover overview_table">
                            <thead>
                                <tr>
                                    <th colspan="2">基金2</th>
                                    <th>问题占比趋势</th>
                                </tr>
                            </thead>
                            <tbody id="overview_jj2">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="table-responsive">
                        <table class="table table-hover overview_table">
                            <thead>
                                <tr>
                                    <th colspan="2">金租</th>
                                    <th>问题占比趋势</th>
                                </tr>
                            </thead>
                            <tbody id="overview_jz">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 各公司平均问题占比 -->
            <div class="col-lg-7">
                <div class="card" id="echarts1" style="width:100%;height:400px;"></div>
            </div>

            <!-- 集团总问题占比趋势 -->
            <div class="col-lg-5">
                <div class="card" id="echarts5" style="width:100%;height:400px;"></div>
            </div>
        </div>

        <!-- 各公司需求改造进度 -->
        <div class="row">
            <div class="col-lg-7">
                <div class="card" id="echarts4" style="width:100%;height:400px;"></div>
            </div>

            <div class="col-lg-5">
                <div class="card" style="width:100%;height:400px;">
                    <h5 class="card-title">各公司需求改造进度</h5>
                    <h4 class="card-subtitle">风险集市相关</h4>
                    <table id="demand_table"></table>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 各公司数据量占比 -->
            <div class="col-lg-7">
                <div class="card" id="echarts3" style="width:100%;height:500px;"></div>
            </div>

            <!-- 各公司同类问题Top 10统计 -->
            <div class="col-lg-5">
                <div class="card" id="echarts2" style="width:100%;height:500px;"></div>
            </div>
        </div>

    </div>
</div>

<!-- footer -->
<footer class="navbar-fixed-bottom" style="line-height: 10px;font-size:13px;">
    <div class="footer">
        © 2019 Hyhyhyhyhyhyh
    </div>
</footer>
</div>

<script>
    //将用户名存入localStorage
    localStorage.setItem('username', "{{ username }}");
</script>

<!-- 设置头像 / 设置日期 -->
<script src="/static/js/init.js"></script>
<!-- 加载echarts数据 -->
<script src="/static/js/dashboard_echarts.js"></script>


</body>

</html>